import React, { useMemo, useState, useRef } from 'react';
import { format } from '@/utils/datetime';
import IconFont from '@/components/base/IconFont';
import { renderNumber } from '@/utils/common';
import PageHeader from '@/components/page/PageHeader';
import DataTable from '@/components/base/DataTable';
import DataEdit from '@/components/base/DataEdit';
import { create, patch } from '@/services/commCRUD';
import { useModel } from 'umi';
import _ from 'lodash';
import { Button, message, Modal, Space } from 'antd';
const daoName = 'CompAccoInrtUpdate';
const columns: API.Column[] = [
  {
    title: '账号',
    width: 260,
    sorter: true,
    key: 'ACNO',
    dataIndex: 'ACNO',
    dispaly: true,
    filter: true,
  },
  {
    title: '子账户',
    width: 110,
    sorter: true,
    key: 'BANO',
    dataIndex: 'BANO',
    dispaly: true,
    filter: true,
  },
  {
    title: '客户名称',
    width: 250,
    sorter: true,
    key: 'CUNM',
    dataIndex: 'CUNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '开户日期',
    width: 120,
    sorter: true,
    key: 'OPDT',
    dataIndex: 'OPDT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '科目',
    width: 150,
    sorter: true,
    key: 'ITNM',
    dataIndex: 'ITNM',
    dispaly: true,
    filter: true,
  },
  {
    title: '数仓原利率',
    width: 150,
    sorter: true,
    key: 'OldInrt',
    dataIndex: 'OldInrt',
    align: 'right',
    render: (data) => renderNumber('.2f', data),
    dispaly: true,
    filter: true,
  },
  {
    title: '维护利率',
    width: 120,
    sorter: true,
    key: 'INRT',
    dataIndex: 'INRT',
    align: 'right',
    render: (data) => renderNumber('.2f', data),
    dispaly: true,
    filter: true,
  },
  {
    title: '当前余额',
    width: 140,
    sorter: true,
    key: 'ACBL',
    dataIndex: 'ACBL',
    render: (data) => renderNumber('.2f', data),
    dispaly: true,
    filter: true,
    align: 'right',
  },
  {
    title: '起息日',
    width: 120,
    sorter: true,
    key: 'VLDT',
    dataIndex: 'VLDT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '到期日',
    width: 120,
    sorter: true,
    key: 'MODT',
    dataIndex: 'MODT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '是否维护',
    width: 150,
    key: 'InrtFlag',
    dataIndex: 'InrtFlag',
    dispaly: true,
    filter: true,
    sorter: true,
  },
];
const controls: API.Control[] = [
  {
    name: 'ACNO',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '账户',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'BANO',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '子账户',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'CUNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '客户名称',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'OPDT',
    rules: [{ required: false, message: '不能为空' }],
    type: 'date',
    label: '开户日期',
    grid: 12 / 24,
    dataType: 'date',
    disabled: true,
  },
  {
    name: 'ITNM',
    rules: [{ required: false, message: '不能为空' }],
    type: 'text',
    label: '科目',
    grid: 12 / 24,
    disabled: true,
  },
  {
    name: 'VLDT',
    rules: [{ required: false, message: '不能为空' }],
    type: 'date',
    label: '起息日',
    grid: 12 / 24,
    dataType: 'date',
    disabled: true,
  },
  {
    name: 'MODT',
    rules: [{ required: false, message: '不能为空' }],
    type: 'date',
    label: '到期日',
    grid: 12 / 24,
    dataType: 'date',
    disabled: true,
  },
  {
    name: 'ACBL',
    rules: [{ required: false, message: '不能为空' }],
    type: 'number',
    label: '当前余额',
    grid: 12 / 24,
    dataType: 'number',
    disabled: true,
  },
  {
    name: 'OldInrt',
    rules: [{ required: false, message: '不能为空' }],
    type: 'number',
    label: '数仓原利率',
    grid: 12 / 24,
    dataType: 'number',
    disabled: true,
  },
  {
    name: 'INRT',
    rules: [{ required: true, message: '不能为空' }],
    type: 'number',
    label: '维护利率(%)',
    grid: 12 / 24,
    dataType: 'number',
    layout: { labelSpan: 8, wrapperSpan: 14 },
  },
  {
    name: 'InrtFlag',
    label: '是否维护',
    rules: [{ required: true, message: '不能为空' }],
    options: [
      { value: '1', label: '是' },
      { value: '0', label: '否' },
    ],
    grid: 12 / 24,
    type: 'select',
  },
];
const daoName2 = 'COMP_ACCO_INRT_WH';
const columns2: API.Column[] = [
  {
    title: '生效日期',
    width: 100,
    sorter: true,
    key: 'SDATE',
    dataIndex: 'SDATE',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
  },
  {
    title: '利率(%)',
    width: 100,
    sorter: true,
    key: 'INRT',
    dataIndex: 'INRT',
    render: (data) => renderNumber('.2f', data),
    dispaly: true,
  },
];
const controls2: API.Control[] = [
  {
    name: 'SDATE',
    type: 'date',
    label: '生效日期',
    grid: 14 / 24,
    dataType: 'date',
    rules: [{ required: true, message: '生效日期不能为空' }],
  },
  {
    name: 'INRT',
    label: '利率',
    type: 'number',
    grid: 10 / 24,
    dataType: 'number',
    rules: [{ required: true, message: '利率不能为空' }],
  },
];
const Users: React.FC = () => {
  const [showEdit, setShowEdit] = useState<boolean>(false);
  const [curRows, setCurRows] = useState<Record<string, any>[]>([]);
  const { permTypes } = useModel('sysInfo', (ret) => ({
    permTypes: ret.getCurPermTypes(),
  }));
  const tableRef = useRef<API.TableAction>();
  const mainTableRef = useRef<API.TableAction>();
  const canEdit = permTypes.indexOf('2') !== -1;
  const llwhComp = useMemo(() => {
    if (!canEdit && !showEdit) {
      return;
    }
    return (
      <Modal
        title="对公存款利率维护"
        width={700}
        maskClosable={false}
        visible={showEdit}
        onCancel={() => {
          setShowEdit(false);
          mainTableRef.current?.reload();
        }}
        footer={false}
      >
        <div style={{ marginTop: -10, marginBottom: 10 }}>
          <DataEdit
            controls={controls2}
            showType="inner"
            layout="inline"
            onSumit={async (values: Record<string, any>) => {
              let func = create;
              if (!_.isEmpty(tableRef.current?.rowDatas)) {
                const row = tableRef.current?.rowDatas?.find((r) => {
                  const sdate1 = format(r.SDATE);
                  const sdate2 = format(values.SDATE);
                  return sdate1 === sdate2;
                });
                if (row) {
                  func = patch;
                  values.ID = row.ID;
                }
              }
              values.JLID = curRows[0].ID;
              func(daoName2, values)
                .then(function () {
                  tableRef.current?.reload();
                })
                .catch(function () {
                  console.error('判断流程管理员出错');
                });
            }}
            renderButtons={(p) => {
              return [
                <Button type="primary" key="submit" onClick={() => p.form?.submit?.()}>
                  添加或修改
                </Button>,
              ];
            }}
          />
        </div>
        <DataTable
          actionRef={tableRef}
          daoName={daoName2}
          columns={columns2}
          controls={controls2}
          canClearFilter={false}
          canExport={false}
          canSelectItems={false}
          seeks={[
            {
              WhereItems: [{ FieldName: 'JLID', Operator: '=', FieldValues: '' + curRows[0].ID }],
              RelationSign: 'AND',
            },
          ]}
          title="利率维护"
          pageSize={20}
        />
      </Modal>
    );
  }, [canEdit, showEdit, curRows]);
  return (
    <PageHeader>
      <Space style={{ marginTop: -10, marginBottom: 10 }}>
        <Button
          onClick={() => {
            if (_.isEmpty(curRows)) {
              message.error('请选择要修改利率的账户');
              return;
            }
            setShowEdit(true);
          }}
        >
          <IconFont type="icon-xinzeng" />
          利率维护
        </Button>
      </Space>
      <DataTable
        actionRef={mainTableRef}
        daoName={daoName}
        columns={columns}
        controls={controls}
        title="利率参数"
        pageSize={20}
        onSelectChange={async (_keys, rows) => setCurRows(rows)}
      />
      {llwhComp}
    </PageHeader>
  );
};

export default Users;
